<template>
    <div class="w-full">
        <Swiper :list="list" height="auto" class="w-full" :showBtn="false" :setHeight="false">
            <template #default="{ data, index }">
                <div class="w-full">
                    <v-row no-gutters class="text-left">
                        <v-col cols="12" sm="12" md="7">
                            <div class="flex flex-row justify-end! md:mr-4 mb-2 md:mb-0!">
                                <img :src="data?.imgs?.[0]" class="h-auto!" :style="{
                                    width: '90%'
                                }" />
                            </div>
                        </v-col>
                        <v-col cols="12" sm="12" md="5" class="flex items-center! justify-center!">
                            <div class=" px-[16px]" ref="refDom">
                                <card :data="data" />
                            </div>
                        </v-col>
                    </v-row>
                </div>
            </template>
        </Swiper>
    </div>

</template>

<script lang="ts" setup>
import { Swiper } from '../swiper';
import card from './card.vue'
withDefaults(
    defineProps<{
        num?: number;
        showImg?: boolean;
        list?: any[];
    }>(), {
    num: 1,
    showImg: false,
    list: () => []
})
const refDom = ref(null);
const height = ref(0)
watchEffect(() => {
    height.value = refDom.value?.clientHeight || 0
})
</script>